



<template>
<div class="container">
  <header class="mui-bar mui-bar-nav">
            <router-link to="/home" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mback"></router-link> 
            <button id="opt" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right"></button>
            <h1 class="mui-title">购物车</h1>
        </header>

<div id="gwc">
		  <div class="mui-content mui-scroll-wrapper content">
		            <div class="mui-scroll uld">
		                <ul id="OA_task_1" class="mui-table-view">
		                    <li class="mui-table-view-cell" v-for="item in gwcnr" :key="index">
		                        <div class="mui-slider-right mui-disabled">
		                            <a class="mui-btn mui-btn-red">删除</a>
		                        </div>
		                        <div class="mui-slider-handle cartinfo">
		                            <div class="checkbox mui-checkbox">
		                                <input name="checkbox" type="checkbox"  v-model="item.state" @change="CheckItem(item)">
		                            </div>
		                            <div class="bookinfo">
		                                <div class="left">
		                                    <div class="bookcover">
		                                        <img :src="item.tpsrc" style="width:40px;height: 40px;"/>
		                                    </div>
		                                    <div class="bookdate">
		                                        <div class="cname">{{item.name}}</div>
		                                        <div class="stage">{{item.jiontime}}</div>
		                                    </div>
		                                </div>
		                                <div class="price">
		                                    ￥{{item.jiage}}元
		                                </div>
		                            </div>
		                        </div>
		                    </li>
		                    
		                </ul>
		            </div>
		        </div>
		        <div class="footer">
		            <div class="left">
		                <div class="mui-input-row mui-checkbox mui-left">
		                    <label style="color:#EF4343;font-size: 16px;" class="mui-left">全选</label>
		                    <input  type="checkbox" @change="allxuan(aaa)" v-model="allxuanz"/>
		                </div>
		                <div class="heji">
		                    <div class="hejititle">合计：</div>
		                    <div class="allprice">{{addall}}元</div>
		                </div>
		            </div>
		            <div class="jiesuanbtn" >结算</div>
		        </div>

		</div>


</div>
</template>

<script>
export default {
	
  data(){
return{ 
shul:3,
addall:0,
allxuanz:false,
gwcnr: [{
				  name:"清仓特价 加厚纯棉老粗布凉席三件套 空调席",
				  jiontime:"2022年5月19日 14:32:11",
				  jiage:21,
				  state:false,
				  tpsrc:'http://doutuiya.gitee.io/vuezy/index/1.jpg'
				   }, {
				 name:"自然而然 手工编织海草编环保桌面杂物化妆品收纳",
				 jiontime:"2022年5月30日 12:23:42",
				 jiage:13,
				 tpsrc:'http://doutuiya.gitee.io/vuezy/index/2.jpg',
				  state:false
				 
				   }, {
				  name:"陶瓷公鸡摆设打鸣公鸡工艺装饰生肖鸡鸡年吉祥物",
				  jiontime:"2022年5月18日 08:12:54",
				  jiage:51,
				  tpsrc:'http://doutuiya.gitee.io/vuezy/index/3.jpg',
				   state:false
				  
				   }],
}

},
   methods:{
         CheckItem(jjj){
            
			   if(jjj.state===true){
				   this.addall+=jjj.jiage; 
				   console.log(jjj.jiage)
			   }else{
				   this.addall-=jjj.jiage;  
			   }
         },
		  allxuan(aaa){
			  console.log(this.allxuanz)
			  if(this.allxuanz==true){
				//此部分不会写
			  }
			 
		  }
     }
  
  
	 
  }


        </script>


  <style>
	  .uld{
		  padding-top: 45px;
	  }
	  .mui-bar{
	      background: #2B2C2F;
	  }
            .mui-title{
                color: #fff;
            }
            .mright,.mback{
                color: #fff;
            }
            .ipx header{
                height: 80px;
            }
            .ipx>header>.mui-action-back{
                top:35px
            }
            .ipx>header>.mui-title{
                top:35px
            }
            .ipx>header>.mui-pull-right{
                top:35px
            }
            .ipx>.mui-content{
                margin-top: 53px;
            }
            
            .cartinfo{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .cartinfo .bookinfo{
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                flex: 1;
            }
            .cartinfo .bookinfo .left{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .cartinfo .checkbox{
                width: 30px;
                height: 30px;
            }
            .cartinfo .checkbox input{
                position: initial;
            }
            .cartinfo .bookinfo .price{
                color:#EF4343 ;
            }
            .bookdate{
                padding-left: 10px;
            }
            .bookdate>.cname{
                font-size: 20px;
                font-weight: bold;
                color: #507783;
            }
            .bookdate>.stage{
                color: #507783;
                font-size: 14px;
            }
            .mui-checkbox input[type=checkbox]:before{
                color: #EF4343;
            }
            .mui-checkbox input[type=checkbox]:checked:before{
                color: #EF4343;
            }
            .footer{
                position: fixed;
                bottom: 50px;
                right: 0;
                left: 0;
                height: 60px;
                border-top: 1px solid #f0f0f0;
                background: #fff;
                line-height: 60px;
                display: flex;
                flex-direction: row;
            }
            .footer input{
                top:16px!important
            }
            .footer>.jiesuanbtn{
                width: 100px;
                text-align: center;
                background: #EF4343;
                color: #fff;
				
            }
            .footer>.left{
                flex: 1;
            }
            .footer>.left>.heji{
                position: absolute;
                right: 110px;
                top: 0;
                display: flex;
                flex-direction: row;
            }
            .allprice{
                color: #EF4343;
            }
            .mui-content{
                margin-bottom: 110px;
            }
        </style>
